<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	
		<div id="app"> <!-- 视图（view）-->
			<p>Hello &emsp; {{username}}</p>
		</div>
		
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			// 创建 Vue 实例
			let vm = new Vue({ // 配置对象
				el: '#app', // element: 选择器
				data: { // 数据（model）
					username: 'wuyuan',
				},
				// 生命周期函数中不能使用箭头函数，因为箭头函数没有 this ；
			// 在实例初始化之后，数据观察（data observer） 和 （event/watcher） 事件配置之前被调用。
			beforeCreate:function(){
				console.log('beforeCreate');
			},
			/* 
				在实例创建完成后被立即调用；
				在这一步，实例已经完成以下配置：数据观察（data observer） 和 （event/watcher） 事件配置/事件回调
				然而,挂载阶段还没开始, $el 属性目前不可见.
			 */
			created: function(){
				console.log("created");
			},
			// el 被新建的vm.$el 替换，挂载成功
			mounted: function(){
				console.log("mounted");
			},
			
			// 数据更新时调用
			beforeUpdate: function(){
				console.log("beforeUpdate");
			},
			
			// 组件 DOM 已经更新，组件更新完毕
			updated: function(){
				console.log("updated");
			},
			
			
			});
			setTimeout(function(){
				vm.username = "changed ......";
			}, 3000);
		</script>
	</body>
</html>
